<template>
  <div class="screen_border">
    <div class="border1"></div>
    <div class="block left_top"></div>
    <div class="block left_bottom"></div>
    <div class="block right_top"></div>
    <div class="block right_bottom"></div>
  </div>
</template>

<script>
  export default {
    name: "screen_border",
    data() {
      return {}
    },
    created() {

    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .screen_border {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 10px;
    z-index: 0;
    .border1{
      border: 2px solid rgba(74,84,112, 0.6);
      height: 100%;
      border-radius: 5px;
    }
    .block{
      width: 60px;
      height: 40px;
      border: 4px solid rgba(36,134,233, 0.6);
    }
    .left_top{
      position: absolute;
      top: 9px;
      left: 9px;
      border-bottom: transparent;
      border-right: transparent;
      border-top-left-radius: 5px;
    }
    .left_bottom{
      position: absolute;
      bottom: 9px;
      left: 9px;
      border-top: transparent;
      border-right: transparent;
      border-bottom-left-radius: 5px;
    }
    .right_top{
      position: absolute;
      top: 9px;
      right: 9px;
      border-bottom: transparent;
      border-left: transparent;
      border-top-right-radius: 5px;
    }
    .right_bottom{
      position: absolute;
      bottom: 9px;
      right: 9px;
      border-top: transparent;
      border-left: transparent;
      border-bottom-right-radius: 5px;
    }
  }
</style>
